<template>
  <view class="cart">
    <view class="cartList">
      <view class="cartItem">

        <!-- 商品信息 -->
        <view class="goodsItem">
          <image  mode=""></image>
          <view class="goodsInfo">
            <view class="name">魅族手机</view>
            <view class="price">￥3333</view>
          </view>
        </view>
        <!-- 数量控制 -->
        <view class="countCtrl">
          <text class="sub" @click="">-</text>
          <text class="count">3</text>
          <text class="add" @click="">+</text>
        </view>
      </view>
    </view>

    <!-- 底部 -->
    <view class="footer">
      <view class="left">
        <text class="iconfont icon-xuanzhong" :class="{ selected: isAllSelected }"
          @click="changeAllSelected(!isAllSelected)"></text>
        <text>已选 {{ totalCount }}</text>
      </view>
      <view class="right">
        <view class="btn">合计：￥{{ totalPrice }}</view>
        <view class="btn order">下单</view>
      </view>
    </view>
  </view>
</template>

<script>
</script>

<style scoped >
.cart {
  background-color: #f4f4f4;
  height: 100%;
}
.cart .cartList .cartItem {
  position: relative;
  height: 172rpx;
  width: 100%;
  margin-top: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  display: flex;
}
.cart .cartList .cartItem .iconfont {
  font-size: 40rpx;
  line-height: 172rpx;
}
.cart .cartList .cartItem .iconfont.selected {
  color: #dd1a21;
}
.cart .cartList .cartItem .goodsItem {
  display: flex;
}
.cart .cartList .cartItem .goodsItem image {
  width: 172rpx;
  height: 172rpx;
  background-color: #ccc;
  margin: 0 40rpx;
}
.cart .cartList .cartItem .goodsItem .goodsInfo .name {
  font-size: 26rpx;
  margin: 10rpx;
}
.cart .cartList .cartItem .goodsItem .goodsInfo .price {
  color: #f00;
}
.cart .cartList .cartItem .countCtrl {
  position: absolute;
  right: 60rpx;
  bottom: 30rpx;
}
.cart .cartList .cartItem .countCtrl text {
  border: 1px solid #ddd;
  padding: 8rpx 28rpx;
}
.cart .cartList .cartItem .countCtrl text:nth-child(2) {
  border: none;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.cart .footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  line-height: 100rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  border-top: 1rpx solid #ccc;
}
.cart .footer .iconfont {
  margin: 0 20rpx;
}
.cart .footer .iconfont.selected {
  color: #dd1a21;
}
.cart .footer .right {
  display: flex;
}
.cart .footer .right .btn {
  flex: 1;
  width: 200rpx;
  display: inline-block;
}
.cart .footer .right .btn.order {
  background: #dd1a21;
  text-align: center;
  color: #fff;
}

</style>
